import { Toast } from "antd-mobile";
import { Component } from "react";

import HouseItem from "../../components/HouseItem";
import NavHeader from "../../components/NavHeader";

import { API } from "../../utils/api";

import styles from './index.module.css'

export default class Favorite extends Component {
  state = {
    favorites: []
  }

  getFavorites = async () => {
    let res = await API('/user/favorites')
    const {data, status} = res
    if (status === 200) {
      this.setState({
        favorites: data.body || []
      })
    } else {
      Toast.fail(data.description)
    }
  }

  componentDidMount() {
    this.getFavorites()
  }

  render() {
    const { favorites } = this.state
    return (
      <div className={styles.favorite}>
        <NavHeader>我的收藏</NavHeader>
        {
          favorites.length ? favorites.map(item => {
            return <HouseItem key={item.houseCode} house={item} onClick={(house) => {this.props.history.push(`/detail/${house.houseCode}`);}}></HouseItem>
          }) : ''
        }
      </div>
    )
  }
}